<template>
	<view>
		<uv-popup ref="popup" mode="bottom" closeable round=10 :close-on-click-overlay="false" @change="onchange">
			<view class="box">
				<view class="line jieshao">
					<text style="font-size: 17px;color: #000;">获取您的昵称、头像</text>
					<text>获取用户头像、昵称完善个人资料，主要用于向用户提供具有辨识度的用户中心界面</text>
				</view>
				<view class="line justify">
					<view class="wz">
						头像
					</view>
					<button class="click" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<uv-avatar :src="message.avatar"></uv-avatar>
						<uv-icon name="arrow-right"></uv-icon>
					</button>
				</view>
				<view class="line justify">
					<view class="wz">
						昵称
					</view>
					<view class="click">
						<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="message.nickname" />
						<uv-icon v-if="message.nickname" name="close-circle" @click="message.nickname = ''"></uv-icon>
					</view>
				</view>
				<view class="button">
					<uv-button :disabled="!message.avatar || !message.nickname"
						:color="!message.avatar || !message.nickname ? '#ccc' : '#07c160'" text="保存" @click="save"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>
<script setup>
	import {
		GetPost
	} from '../api/user';
	import {
		watch,
		ref,
		reactive
	} from 'vue';
	const popup = ref()
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	const emit = defineEmits(['update:modelValue', 'change'])
	const message = reactive({
		avatar: "",
		nickname: ""
	})
	const onChooseAvatar = (e) => {
		message.avatar = e.detail.avatarUrl
	}
	watch(props, (newvalue) => {
		newvalue.modelValue ? popup.value.open() : ''
	}, {
		deep: true
	})
	const onchange = (e) => {
		!e.show ? emit('update:modelValue', false) : ''
	}
	const save = () => {
		wx.getUserProfile({
			desc: '用于获取用户信息进行登录绑定',
			success: (res) => {
				const encryptedData = res.encryptedData;
				const iv = res.iv;
				wx.login({
					success: async (res) => {
						if (res.code) {
							//发起网络请求
							let {
								data
							} = await GetPost('Wxlogin/index', {
								code: res.code,
								encryptedData,
								iv,
								...message
							})
							if (data.token) {
								uni.setStorageSync('token', data.token)
								emit('change')
								popup.value.close()
							}
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			fail: (err) => {
				console.log('获取用户信息失败', err);
			}
		});
	}
</script>
<style lang="scss" scoped>
	.box {
		padding: 1rem;

		.jieshao {
			display: grid;
			gap: 0.5rem;

			text {
				color: #ccc;
			}
		}

		.justify {
			display: flex;
			align-items: center;

			.wz {
				width: 20%;
			}
		}

		.line {
			padding: 1rem 0;
			border-bottom: 0.1rem solid #eeeeee;

			.click {
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				background: none;
				padding: 0;
			}

			button::after {
				border: none;
			}
		}

		.button {
			padding: 1rem 0;
			width: 40%;
			margin: 0 auto;
		}
	}
</style>